<!-- 接货订单管理 -->
<template>
<div class="content-box">
  <div style="display: flex;">
    <FilterBox
      style="flex: 1;"
      :labelWidth="120"
      :filterItemList="filterItemList"
      :filterData="filterData"
      @search="search"
      @clear="clear"
      @keep="keepHeaderList"
    >
        <template v-slot:order_uid>
        <Loadselect
            :select_value="'uid'"
            :select_label="'nickname'"
            :modalName="'order_uid'"
            :select_model="filterData.order_uid"
            :select_options="customeroptions"
            @selectBlur="selectBlur('order_uid')"
            @selectChang="LoadselectChange"
            :isLazy="true"
            @loadData="loadData"
            @filterDataFun="filterDataFun"
        >
        </Loadselect>
        </template>
    </FilterBox>
    <div style="min-height: 38px;margin-bottom: 15px;line-height:38px;background-color: #EBEEF3;padding:3px 10px;">
      <el-popover popper-class="headerCity" placement="bottom" trigger="click" ref="popoverRefCity" @hide="CityHide">
        <div>
          <el-input
            style="margin-bottom:4px;"
            @input="filterCityInput"
            v-model="filterCity"
          ></el-input>
        </div>
        <ul style="margin: 0;height:300px;overflow:auto;">
          <li
            :style="{backgroundColor:current_city_id == item.id? '#fff065': '#fff',}"
            class="city_btn_style"
            v-for="item in CityList"
            :key="item.id"
            @click="selectCity(item)"
          >
            {{ item.name_current }}
          </li>
        </ul>
        <span style="color: #6c9ee5 ; cursor: pointer" slot="reference"
          >[{{ current_city_name }}]</span
        >
      </el-popover>
    </div>
  </div>
  <MyTable
    :tableColumn="tableColumn"
    :tableData="tableData"
    @setOrder="setOrder"
    @sendCurrentData="setCurrent"
    >
    <template v-slot:content="scope">
      <span>{{ scope.row[scope.config.prop] }}</span>
    </template>
  </MyTable>
  <!-- 分页组件 -->

  <Pagination
    :currentPage="pageinfo.page"
    :pageSize="pageinfo.limit"
    :total="pageinfo.number_all"
    :page_all="pageinfo.page_all"
    @pagination="SetPagination"
    @sendPushButton="pushButton"
  >
  </Pagination>

  <Add
    @success="getTableData"
    ref="add"
  ></Add>
</div>
</template>

<script>
import Add from "./DeliveryOrderManagement_add";
export default {
  components: {
    Add,
  },
  data(){
    return{
      CityList:[],
      current_city_id:'',
      current_city_name:'',
      filterCity:'',

      filterItemList:[

        // 下拉框
        { label:this.$t('ReservoirRegionLang.customer'),width:200, filterKey: 'order_uid', filterType: 'filter_slot'},
        // 下拉框
        { label:this.$t('ReservoirRegionLang.area_names'),width:200, filterKey: 'storage_area_code', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name_current',value:'code'} },
        // input输入框
        { label:this.$t('ReservoirRegionLang.ticket_number'),width:200, filterKey: 'shelves_number', filterType: 'SearchInput', placeholderStr: null },
        // 下拉框
        { label:this.$t('DeliveryOrderManagementLang.order_type'),width:200,  filterKey: 'status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name',value:'id'} },
      ],

      filterData:{
        page: "",
        limit: "30",
        order:"",

        order_uid: "",
        code: "",
        shelves_number: "",
        status: "",
      },


      loadSelectPageInfo:{
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      },
      customeroptions:[],
      options_storage:[],
      options_switch:[],
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('WarehouseManagementLang.name'),
          prop: "storage_area_name",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.customer'),
          prop: "shelves_number",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.ticket_number'),
          prop: "shelves_code",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.cases'),
          prop: "shelves_box_num",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.volum'),
          prop: "shelves_volume",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.quantity'),
          prop: "shelves_volume",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('DeliveryOrderManagementLang.estimated_arrival_date'),
          prop: "shelves_volume",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('DeliveryOrderManagementLang.order_type'),
          prop: "shelves_volume",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('DeliveryOrderManagementLang.delivery_date'),
          prop: "shelves_volume",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('DeliveryOrderManagementLang.pick_up_date'),
          prop: "shelves_volume",
          width: 100,
        },
      ],
      tableData: [],

      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataObj:{},
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getHeaderList()
    this.getCityList()
  },
  methods:{
    loadData(){
      if(this.loadSelectPageInfo.page<this.loadSelectPageInfo.page_all){
        this.loadSelectPageInfo.page++
        this.$get("screenChilds",{name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
          this.customeroptions.push(...res.data)
        });
      }
    },
    filterDataFun(value){
      this.loadSelectPageInfo.page=1
      this.loadSelectPageInfo.keyword=value
      this.$get("screenChilds",{name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.customeroptions = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
    },
    //自定义多选下拉框
    selectBlur(){
      this.loadSelectPageInfo={
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      }
      this.filterDataFun('')
    },
    LoadselectChange(obj){
      this.filterData[obj.name]=obj.value
    },
    // 获取下拉单列表
    async getOptionsList() {
        await this.$get("screenChilds",{name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.customeroptions = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
      await this.$get("getStorageArea",{address_id:this.filterData.address_id,status:0}).then((res) => {
        this.options_storage = res.data;
      });
      await this.$get("getAddressSratus").then((res) => {
        this.options_switch = res.data;
      });

      this.filterItemList=[
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.customer'),width:200, filterKey: 'order_uid', filterType: 'filter_slot' },
        // 下拉框
        { label:this.$t('ReservoirRegionLang.area_names'),width:200, filterKey: 'storage_area_code', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.options_storage,label:'name_current',value:'code'} },
        // input输入框
        { label:this.$t('ReservoirRegionLang.ticket_number'),width:200, filterKey: 'shelves_number', filterType: 'SearchInput', placeholderStr: null },
        // 下拉框
        { label:this.$t('DeliveryOrderManagementLang.order_type'),width:200,filterKey: 'status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.options_switch,label:'name',value:'id'} },
      ]
    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.filterData.storage_area_code= "",
      this.filterData.shelves_number= "",
      this.filterData.shelves_code= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId);
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 点击排序
    setOrder(data){
      this.filterData.order=data
      this.getTableData()
    },

    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    pushButton(route) {
        if (route == "add") {
            this.$refs.add.init(this.filterData.storage_area_code);
        } else if (route == "look") {
          // if (JSON.stringify(this.sendDataObj) == "{}") {
          //     this.$message.warning(this.$t('common.message_warn_text'));
          // } else {
            this.$refs.look.init(this.sendDataObj);
          // }
        }
    },
    switchChange(data){
      let params = new FormData();
        params.append("shelves_code", data.shelves_code);
        params.append("status", data.status);
      this.$postForm('editStatesStorageAreaShelves',params).then((res) => {
        if(res.success){
          this.$message.success(res.msg);
        }
        this.getTableData()
      })
    },
    // 获取表格数据
    getTableData(){
      this.$get("storageAreaShelvesList", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataObj={}
      });
    },
    setCurrent(data){
      this.sendDataObj=data
    },
    async getCityList() {
      await this.$get("getMyAddress").then((res) => {
          this.OldCityList = res.data.list;
          this.CityList=JSON.parse(JSON.stringify(this.OldCityList)) 
      });
      this.$get("getMemberLocal").then((res) => {
          if(this.OldCityList.length>0){
              this.current_city_id = res.data.lid;
              if(this.OldCityList.filter(el=>{return el.id==this.current_city_id}).length>0){
                  this.current_city_name= this.OldCityList.filter(el=>{return el.id==this.current_city_id})[0].name_current
              }else{
                  this.current_city_id =this.OldCityList[0].id
                  this.current_city_name=this.OldCityList[0].name_current
                  this.selectCity({id:this.current_city_id})
              }
          }else{
              this.current_city_id =''
              this.current_city_name=''
          }
          this.filterData.address_id=this.current_city_id
          this.getTableData()
          this.getOptionsList()
      });
    },
    //选择城市
    selectCity(data) {
      this.current_city_id = data.id;
      this.current_city_name= this.OldCityList.filter(el=>{return el.id==this.current_city_id})[0].name_current
      this.filterData.address_id=this.current_city_id
      this.$refs.popoverRefCity.doClose();
      this.getTableData()
      this.getOptionsList()
      let params = new FormData();
        params.append("lid", data.id);
      this.$postForm("saveMemberLocal", params).then((res) => {});
    },
    filterCityInput(){
        this.CityList=[]
        this.OldCityList.forEach(item => {
            if(item.name_current.includes(this.filterCity)){
            this.CityList.push(item)
            }
        });
    },
    CityHide(){
        this.filterCity=''
        this.CityList=JSON.parse(JSON.stringify(this.OldCityList))
    },
  }
}
</script>
<style scoped lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
</style>